<template>
  <div>
    <el-form
      v-if="!token"
      :model="from"
      :rules="rules"
      ref="fromResetField"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="urName">
        <el-input v-model="from.urName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="urPassword">
        <el-input v-model="from.urPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button @click="fromResetField">重置</el-button>
      </el-form-item>
    </el-form>
    <div v-if="token" class="UserTop">
      <div class="demo-type">
        <el-divider></el-divider>
        <el-avatar class="user" :src="user.image"></el-avatar>
        <center>
          <single-upload
            v-if="userifupdate"
            v-model="user.image"
          ></single-upload>
        </center>
      </div>
      <div>
        <el-form ref="form" :model="user" label-width="80px" size="mini">
          <el-form-item label="账号:">
            <el-input v-model="user.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="电话:">
            <el-input v-model="user.phone" :disabled="!userifupdate"></el-input>
          </el-form-item>
          <el-form-item label="性别:" class="selectEl">
            <el-select
              v-model="user.sex"
              placeholder="选择性别"
              :disabled="!userifupdate"
            >
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="UserifUpdate"
            ></el-button>
            <el-button type="primary" @click="UserUpate" v-if="userifupdate"
              >修改</el-button
            >
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item>
            <router-link to="/user/userShop"
              ><el-button type="primary">购买</el-button></router-link
            >
            <router-link to="/user/userCollect"
              ><el-button type="primary">收藏</el-button>
            </router-link>
            <router-link to="/user/userShoppingCart"
              ><el-button type="primary">购物车</el-button>
            </router-link>
            <router-link to="/user/userAddress">
              <el-button type="primary">地址</el-button>
            </router-link>
          </el-form-item>

          <el-divider></el-divider>

          <el-form-item label="旧密码:">
            <el-input
              v-model="oldPassword"
              :disabled="!userifupdate"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码:">
            <el-input
              type="password"
              v-model="urPassword"
              :disabled="!userifupdate"
            ></el-input>
          </el-form-item>
          <el-form-item> </el-form-item>
          <center>
            <el-button type="primary" @click="updatePassword"
              >修改密码</el-button
            >
          </center>
          <el-button @click="userOut">注销</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import login from "@/api/login";
import user from "@/api/user";
import singleUpload from "@/components/upload/singleUpload";
export default {
  components: { singleUpload },
  data() {
    return {
      userifupdate: false,
      oldPassword: "",
      urPassword: "",
      user: [],
      token: window.sessionStorage.getItem("token"),
      from: {
        urName: "张三",
        urPassword: "123",
      },
      rules: {
        urName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        urPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //用户密码修改
    updatePassword() {
      user
        .updatePassword(this.oldPassword, this.urPassword, this.user.id)
        .then((res) => {
          if (res.data.code == 200) {
            //修改成功
            this.$message({
              message: "修改成功,重新登录即可生效！",
              type: "success",
            });
          }
        });
    },
    //用户信息修改
    UserUpate() {
      var userr = {
        urSex: this.user.sex,
        urPhone: this.user.phone,
        urId: this.user.id,
        urImage: this.user.image,
      };
      user.updateUser(userr).then((res) => {
        if (res.data.code == 200) {
          //修改成功
          this.$message({
            message: "修改成功,重新登录信息即可生效！",
            type: "success",
          });
        }
      });
    },

    //开启修改
    UserifUpdate() {
      if (this.userifupdate == true) {
        this.userifupdate = false;
      } else {
        this.userifupdate = true;
      }
    },
    login() {
      this.$refs.fromResetField.validate((v) => {
        //console.log(v) //判断预验证
        if (!v) return;
        login.getLogin(this.from).then((res) => {
          console.log(res);
          if (res.data.data.user) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            //登录成 保存登录用户的信息
            /* 
              token 只适应当前网站打开期间生效  保存sessions
            */
            window.sessionStorage.setItem("token", res.data.data.token);
            //console.log( window.sessionStorage.getItem('token'))

            //跳转
            this.$router.go(0);
          } else {
            this.$message.error("登录失败！");
          }
        });
      });
    },
    fromResetField() {
      // 直接获取实列this.from
      this.from.username = "张三";
      this.from.password = "123";
    },
    //登录成功过后获取登录里面的信息
    getUser() {
      var token = window.sessionStorage.getItem("token");
      if (token) {
        user.getUserToken(token).then((res) => {
          var data = res.data.data;
          this.user = data;
        });
      }
    },

    //注销
    userOut() {
      window.sessionStorage.removeItem("token");
      //跳转
      this.$router.go(0);
    },
  },
  created() {
    this.getUser();
  },
};
</script>

<style  scoped>
.UserTop {
  margin-top: -1%;
}
.user {
  margin-left: 50%;
}
.leftTopButton {
  margin-top: 32%;
  margin-left: 0%;
}
.leftTopBsutton {
  position: relative;
  margin-top: 15%;
  margin-left: 0%;
}
.inputClass {
  margin-left: 0%;
}
.selectEl {
  margin-left: 0%;
}
</style>
